<template>
  <div style="display: flex;flex-direction: column;align-items: center;">
    <div class="top">
      <div style="padding: 40px 0;">
        <el-input style="width:200px" placeholder="请输入文章名称" suffix-icon="el-icon-search" v-model="name"></el-input>
        <el-button  style="margin-left: 10px" type="primary" @click="load">搜索</el-button>
        <el-button  style="margin-left: 10px" type="warning" @click="reset">重置</el-button>
        <router-link to="/ResourceDownload"><el-button  style="margin-left: 10px" type="primary" >资源下载</el-button></router-link>


      </div>

    </div>

    <!--   文章-->
    <div class="MainBodyOfArticle">
      <!--    左侧主题文章展示部分-->
      <div class="leftSide" >
        <div  v-for="item in tableData" :key="item.id" style="display: flex;border-radius: 20px;margin-bottom:10px;">
          <div class="leftdetail"style="width: 80%;height: 100%;background-color: #f3ecec;display: inline-block;border-top-left-radius: 30px">
            <!--                文章头部信息-->
            <div  style="margin-top: 20px ;font-size: 18px;color: #222226;font-weight: 600;padding: 0 30px;overflow: hidden;display: flex;align-items: center;cursor: pointer"  @click="$router.push('/blogDetails?id='+item.id)">
              <span class="aaabbb">{{item.name}}</span>
            </div>
            <!--                文章简介-->
            <div style="font-size: 14px;color: #99999A;margin-top: 10px ;padding: 10px 30px;overflow: hidden">
              {{item.summary}}
            </div>
            <!--                文章阅读次数以及其他-->
            <div style="display: flex;align-items: center;padding: 0 30px;font-size: 14px;color: #999aaa;margin-top: 50px;">
              <!--                阅读次数-->
              <div style="flex: 10">
                <icon class="el-icon-user"></icon>
                {{item.user}}
              </div>
              <!--                    作者名称-->
              <div style="">
                <i class="el-icon-view" style="margin-right: 5px"></i>{{item.readnumber}}
              </div>
              <!--                  发布时间-->
              &nbsp; &nbsp; &nbsp; <div style="">
              <icon class="el-icon-date"></icon>
              {{item.time}}
            </div>
            </div>
          </div>
          <div class="rightdetail" style="display: inline-block;width: 40%;height: 200px;border-top-right-radius: 30px">
            <img :src="item.cover" style="width: 100%;height: 100%;border-bottom-right-radius: 30px"/>
          </div>
        </div>
        <div style="padding: 1px 0px;margin-right:293px; width: 1007px">
          <el-pagination
              style="background-color: #ffffff"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[7,10]"
              :page-size="pageSize"
              layout="total,  prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </div>

    </div>


  </div>
</template>

<script>
import axios, {Axios as request} from "axios";

export default {
  name: "Article",
  data(){
    return {
      tableData: [],
      total:0,
      pageNum:1,
      pageSize:10,
      sideWidth:200,
      name:"",
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    }
  },
  created() {
    this.load()
  },

  methods:{
    view(content) {
      this.content = content
      this.viewDialogVis = true
    },

    load(){
      this.request.get("/article/selectCollectionArticle/"+this.user.id).then(res=>{
        this.tableData = res.data

      })

    },

    handleSizeChange(pageSize){
      // console.log(pageSize)
      this.pageSize=pageSize
      //之后请求数据
      this.load()
    },
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum=pageNum
      this.load()
    },

    reset(){
      this.name = null;
      this.load()
    },


  }
}
</script>

<style scoped>
.top{
  height: 100px;
  width: 100%;
  background-image: url("../../assets/micro_bg.png");
  background-position:center;
  background-size: 100%;
  text-align: center;
  margin-bottom: 10px;
}
.MainBodyOfArticle{
  display: flex;
  gap: 20px;
  justify-content: center;
}
.leftSide{
  width: 1000px;
  display: flex;
  flex-direction: column;
}

.aaabbb:hover{
  color: rgb(169, 204, 241);
}
</style>